<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="assets/css/jquery.mobile-1.4.5.css" />
	</head>

	<body>
		<div data-role="page" id="pageone">
			<div data-role="main" class="ui-content">
				<h1 style="text-align: center;">1</h1>
				<p>向右滑动→ </p>
				<input />
				<a href="#pagetwo" data-transition="slidedown">点击事件，向第2个页面</a>
				<br><br>WEB安全色（红）
				<div style="width: 100%;height: 200px;background: #CC0000;"></div>
				<div style="width: 100%;height: 200px;background: #CC0033;"></div>
				<div style="width: 100%;height: 200px;background: #CC3300;"></div>
				<div style="width: 100%;height: 200px;background: #CC3333;"></div>
				<div style="width: 100%;height: 200px;background: #CC6600;"></div>
				<div style="width: 100%;height: 200px;background: #CC6633;"></div>
				<div style="width: 100%;height: 200px;background: #CC6666;"></div>
				<div style="width: 100%;height: 200px;background: #CC9966;"></div>
				<div style="width: 100%;height: 200px;background: #CC9999;"></div>
			</div>
		</div>
		<div data-role="page" id="pagetwo">
			<div data-role="main" class="ui-content">
				<h1 style="text-align: center;">2</h1>
                <p>←向左滑动 </p>            <p>向右滑动→ </p>
				<a href="#pageone" data-transition="slideup">点击事件，向第1个页面</a><br>
				<a href="#pagethree" data-transition="slidedown">点击事件，向第3个页面</a>
				<br><br>WEB安全色（蓝）
				<div style="width: 100%;height: 200px;background: #3399FF;"></div>
				<div style="width: 100%;height: 200px;background: #33CCFF"></div>
				<div style="width: 100%;height: 200px;background: #3366FF"></div>
				<div style="width: 100%;height: 200px;background:#3366CC;"></div>
				<div style="width: 100%;height: 200px;background: #336699"></div>
				<div style="width: 100%;height: 200px;background:#3333FF;"></div>
				<div style="width: 100%;height: 200px;background: #3333CC;"></div>
				<div style="width: 100%;height: 200px;background:#333399"></div>
				<div style="width: 100%;height: 200px;background: #3300FF;"></div>
			</div>
		</div>
		
		<div data-role="page" id="pagethree">
			<div data-role="main" class="ui-content">
				<h1 style="text-align: center;">3</h1>
                <p>←向左滑动 </p>
				<a href="#pagetwo" data-transition="slideup">点击事件，向第2个页面</a>
				<br><br>WEB安全色（绿）
				<div style="width: 100%;height: 200px;background: #99FF66"></div>
				<div style="width: 100%;height: 200px;background: #99FF33"></div>
				<div style="width: 100%;height: 200px;background: #99FF00"></div>
				<div style="width: 100%;height: 200px;background:#66FF66;"></div>
				<div style="width: 100%;height: 200px;background:#66FF33"></div>
				<div style="width: 100%;height: 200px;background:#66FF00;"></div>
				<div style="width: 100%;height: 200px;background: #33FF33;"></div>
				<div style="width: 100%;height: 200px;background:#33FF00"></div>
				<div style="width: 100%;height: 200px;background: #00FF00;"></div>
			</div>
		</div>

		<script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.mobile-1.4.5.js"></script>
		<script>
			$("#pageone").on("swipeleft", function() {
				$.mobile.changePage('#pagetwo', {  
					transition: 'slide',
				});
			});
			$("#pagetwo").on("swiperight", function() {
				$.mobile.changePage('#pageone', {  
					transition: 'flow',
					direction:"reverse"
				});
			});
			
			$("#pagetwo").on("swipeleft", function() {
				$.mobile.changePage('#pagethree', {  
					transition: 'slide',
				});
			});
			
			$("#pagethree").on("swiperight", function() {
				$.mobile.changePage('#pagetwo', {  
					transition: 'flow',
					direction:"reverse"
				});
			});
		</script>
	</body>
</html>